<template>
  <Modal
    v-model="showModal"
    title="修改密码"
    :styles="styles.modalStyle"
    :mask-closable="false"
    scrollable
    class="edit-container"
    @on-visible-change="close"
  >
    <vue-scroll class="form-scroll" :ops="scrollOptions" :style="styles.scrollStyle">
      <Form ref="form" :model="form" :label-width="labelWidth" :rules="formRule" class="form-container">
        <Row>
          <FormItem label="验证码：" prop="VerCode">
            <Input
              v-model="form.VerCode"
              :maxlength="6"
              search
              :enter-button="verifyButton"
              @on-search="getVerifyCode"
            />
          </FormItem>
        </Row>
        <Row>
          <FormItem label="新密码：" prop="Password">
            <Input v-model="form.Password" type="password" :maxlength="PASSWORD_MAX_LENGTH" autocomplete="new-password" />
          </FormItem>
        </Row>
        <Row>
          <FormItem label="密码确认：" prop="ConfirmPassword">
            <Input v-model="form.ConfirmPassword" type="password" :maxlength="PASSWORD_MAX_LENGTH" autocomplete="new-password" />
          </FormItem>
        </Row>
        <div class="tail"></div>
      </Form>
    </vue-scroll>
    <div slot="footer">
      <div class="footer-btn-container">
        <Button :loading="submitting" @click="close">取消</Button>
        <Button :loading="submitting" type="primary" @click="submit">保存</Button>
      </div>
    </div>
  </Modal>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  computed: {
    verifyButton () {
      let count = this.count
      if (this.loadingVerifyCode && count) {
        return `${count}秒后重发`
      } else {
        return '获取验证码'
      }
    }
  },
  data () {
    let Validator = this.formRuleValidator.Validator

    return {
      styles: this.util.getModalStyle(500, 330),
      showModal: true,
      labelWidth: 72,
      form: {
        VerCode: '',
        Password: '',
        ConfirmPassword: ''
      },
      formRule: {
        Password: Validator.getRequiredRule(),
        ConfirmPassword: Validator.getRequiredRule()
      },
      submitting: false,
      loadingVerifyCode: false,
      PASSWORD_MAX_LENGTH: 15,
      MAX_WAIT_TIME: 60,
      count: 60,
      setTimeoutKey: null,
      enable: true
    }
  },
  beforeDestry () {
    this.clearSetTimeout()
  },
  methods: {
    ...mapActions(['changeUpdatePasswordModal']),
    close () {
      this.showModal = false
      this.changeUpdatePasswordModal(false)
    },
    getVerifyCode () {
      if (this.loadingVerifyCode) {
        return
      }

      this.count = this.MAX_WAIT_TIME
      this.loadingVerifyCode = true
      this.setVerifyButton()
      api.getVerifyCode({
        Mobile: this.$store.state.user.user.Mobile,
        // 修改密码
        Type: 3
      }).then(res => {
        this.tipUtil.success('验证码已发送')
      }).catch(() => {
        this.loadingVerifyCode = false
      })
    },
    clearSetTimeout () {
      this.enable = false
    },
    setVerifyButton () {
      if (!this.enable) {
        return
      }

      let count = this.count
      if (this.loadingVerifyCode && count) {
        this.count = count - 1
        this.setTimeoutKey = setTimeout(() => {
          if (!this.enable) {
            return
          }

          this.setVerifyButton()
        }, 1000)
      } else {
        setTimeout(() => {
          this.loadingVerifyCode = false
          this.count = this.MAX_WAIT_TIME
        })
      }
    },
    submit () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let form = this.objectUtil.copyObject(this.form)

          if (!form.VerCode.length) {
            this.tipUtil.warning(`请输入验证码`)
            return
          }

          if (form.Password !== form.ConfirmPassword) {
            this.tipUtil.error('密码与密码确认不一致')
            return
          }

          this.submitting = true
          api.changePassword(form).then(res => {
            this.tipUtil.success('操作成功')

            // 更新表单密码
            // let user = localStorage.getItem('loginForm')
            // if (user) {
            //   user = JSON.parse(user)
            //   user.Password = form.Password
            //   localStorage.setItem('loginForm', JSON.stringify(user))
            // }

            this.close()
          }).catch(() => {
            this.submitting = false
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.edit-container {
  .form-container {
  }
}
</style>
